<template>
  <div class="personnel-status">
    <div class="module-title">
      <div class="title-icon">👷</div>
      <div class="title-text">人员实时状态</div>
    </div>
    
    <div class="status-overview">
      <div class="overview-item">
        <div class="count">{{ totalPersonnel }}</div>
        <div class="label">总人数</div>
      </div>
      <div class="overview-item">
        <div class="count online">{{ onlinePersonnel }}</div>
        <div class="label">在线</div>
      </div>
      <div class="overview-item">
        <div class="count offline">{{ offlinePersonnel }}</div>
        <div class="label">离线</div>
      </div>
    </div>

    <div class="status-chart">
      <div class="chart-container" ref="personnelChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'PersonnelStatus',
  data() {
    return {
      totalPersonnel: 156,
      onlinePersonnel: 142,
      offlinePersonnel: 14,
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.startDataUpdate()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.personnelChart, null, {
        renderer: 'svg'
      })
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          top: 'middle',
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei, Arial, sans-serif'
          },
          itemWidth: 14,
          itemHeight: 10,
          itemGap: 12
        },
        series: [
          {
            name: '人员状态',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['65%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold',
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { 
                value: 45, 
                name: '正常作业',
                itemStyle: { color: '#00d4aa' }
              },
              { 
                value: 38, 
                name: '高空作业',
                itemStyle: { color: '#ffa726' }
              },
              { 
                value: 23, 
                name: '受限空间',
                itemStyle: { color: '#ff6b6b' }
              },
              { 
                value: 36, 
                name: '设备操作',
                itemStyle: { color: '#4fc3f7' }
              },
              { 
                value: 14, 
                name: '离线',
                itemStyle: { color: '#78909c' }
              }
            ]
          }
        ]
      }
      
      this.chart.setOption(option)
    },
    
    startDataUpdate() {
      this.timer = setInterval(() => {
        // 模拟数据更新
        this.updateData()
      }, 5000)
    },
    
    updateData() {
      // 随机更新人员数量
      const variation = Math.floor(Math.random() * 6) - 3 // -3 到 +3 的变化
      this.onlinePersonnel = Math.max(120, Math.min(160, this.onlinePersonnel + variation))
      this.offlinePersonnel = this.totalPersonnel - this.onlinePersonnel
      
      // 更新图表数据
      if (this.chart) {
        const newData = [
          { value: 45 + Math.floor(Math.random() * 10) - 5, name: '正常作业', itemStyle: { color: '#00d4aa' }},
          { value: 38 + Math.floor(Math.random() * 8) - 4, name: '高空作业', itemStyle: { color: '#ffa726' }},
          { value: 23 + Math.floor(Math.random() * 6) - 3, name: '受限空间', itemStyle: { color: '#ff6b6b' }},
          { value: 36 + Math.floor(Math.random() * 8) - 4, name: '设备操作', itemStyle: { color: '#4fc3f7' }},
          { value: this.offlinePersonnel, name: '离线', itemStyle: { color: '#78909c' }}
        ]
        
        this.chart.setOption({
          series: [{
            data: newData
          }]
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.personnel-status {
  height: 100%;
  padding: 15px;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  .module-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
    
    .title-icon {
      font-size: 20px;
      margin-right: 8px;
    }
    
    .title-text {
      font-size: 16px;
      font-weight: bold;
      color: #00d4aa;
    }
  }
  
  .status-overview {
    display: flex;
    justify-content: space-around;
    margin-bottom: 12px;
    flex-shrink: 0;
    
    .overview-item {
      text-align: center;
      
      .count {
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 4px;
        
        &.online {
          color: #00d4aa;
        }
        
        &.offline {
          color: #ff6b6b;
        }
      }
      
      .label {
        font-size: 12px;
        color: #999;
      }
    }
  }
  
  .status-chart {
    height: 220px;
    margin-bottom: 12px;
    flex-shrink: 0;
    
    .chart-container {
      width: 100%;
      height: 100%;
    }
  }
}
</style>



